Blazor cookie authentication - Logout page

In this video we will discuss implementing logout functionality in Blazor. For this we will use ASP.NET Core Identity logout page.

Logout link in the navigation manu

The path to get to ASP.NET Core Identity logout page is /identity/account/logout

<li class="nav-item px-3">
    <NavLink class="nav-link" href="/identity/account/logout" Match="NavLinkMatch.All">
        <span class="oi oi-power-standby" aria-hidden="true"></span> Logout
    </NavLink>
</li>

ASP.NET Core Identity logout page

• ASP.NET Core Identity logout page is in Areas/Identity/Pages/Account/Logout.cshtml. 
• ASP.NET Core Identity scaffolder provided the implementation of the Logout page.

Logout.cshtml

@page
@model LogoutModel
@{
    ViewData["Title"] = "Log out";
}

<header>
    <h1>@ViewData["Title"]</h1>
    <p>You have successfully logged out of the application.</p>
</header>

Logout.cshtml.cs

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Logging;
using System.Threading.Tasks;

namespace EmployeeManagement.Web.Areas.Identity.Pages.Account
{
    [AllowAnonymous]
    public class LogoutModel : PageModel
    {
        private readonly SignInManager<IdentityUser> _signInManager;
        private readonly ILogger<LogoutModel> _logger;

        public LogoutModel(SignInManager<IdentityUser> signInManager, ILogger<LogoutModel> logger)
        {
            _signInManager = signInManager;
            _logger = logger;
        }

        public void OnGet()
        {
        }

        public async Task<IActionResult> OnPost(string returnUrl = null)
        {
            await _signInManager.SignOutAsync();
            _logger.LogInformation("User logged out.");
            if (returnUrl != null)
            {
                return LocalRedirect(returnUrl);
            }
            else
            {
                return RedirectToPage();
            }
        }
    }
}

• To signout the user, SignInManager.SignOutAsync() method is used. This method removes the authentication cookie.
• SignOutAsync() method is called on the form POST. When we click the Logout navigation link, a GET request is issued to the logout page.
• OnGet() method in Logout page is empty. Nothing happens. It just displays the static text - You have successfully logged out of the application.
• To delete the autentication cookie and log out the user a POST request must be issued to the Logout page.
• You can do this by clicking the Logout link on the top right hand corner of the Logout page.

The logoutForm and the logout submit button are in Pages/Shared/_LoginPartial.cshtml file.

Submit logout form automatically

Include the following JavaScript code to automatically submit the logout form. We are using an IIFE here. IIFE stands for Immediately Invoked Function Expression. It is also called as a Self-Executing Anonymous Function. In simple terms it is a JavaScript function that runs as soon as it is defined.

<script>
    (() => {
        document.getElementById('logoutForm').submit();
    })()
</script>

Redirect to the application root

If you do not want to stay on the ASP.NET Core Identity Logout page, you can redirect the user to the application root URL by modifying the code in OnPost() method of Logout.cshtml.

public async Task<IActionResult> OnPost(string returnUrl = null)
{
    await _signInManager.SignOutAsync();
    _logger.LogInformation("User logged out.");
    if (returnUrl != null)
    {
        return LocalRedirect(returnUrl);
    }
    else
    {
        // Redirect the user to application root
        return LocalRedirect("~/");
    }
}

We discussed ASP.NET Core Identity concepts like registering users, login, logout etc in our ASP.NET Core tutorial. If you are new to ASP.NET Core identity, please check out videos from Part 65 from ASP.NET Core tutorial.